<template>
	<view class="item_con mb-16" @click="toDetails">
		<view class="img_con">
			<!-- <w-image :src="info.list_image" :width="328/2" :height="328/2" radius="10"></w-image> -->
			<image :src="$ossUrl + info.list_image" style="width: 328rpx;height: 328rpx;border-radius: 24rpx;"></image>
			<!-- <view class="text">{{ getText() }}</view> -->
			
			<view v-if="getStatus()" class="hint flex flex-ai-center">
				<!-- <w-icon :name="getStatus().icon" size="12"></w-icon> -->
				<text class="font-size-10 font-color-white mlr-2">{{ getStatus().text }}</text>
				<u-count-down v-if="getStatus().time" :time="getStatus().time"></u-count-down>
			</view>
		</view>
		<view class="info bg-color-white">
			<view class="t1 text-overflow mb-8">{{ info.goods_name }}</view>
		<!-- 	<view class="flex">
				<w-tag name="限量" :value="`${info.limited}份`" ></w-tag>
			</view> -->
			<view class="flex flex-ai-center flex-js-sb">
				<view class="flex-center flex">
					<w-icon :name="crystalIcon(info.crystal_type)" size="18"></w-icon>
					<view class="ml-4">{{ info.crystal_number }}</view>
				</view>
				<view class="dh-btn">兑换</view>
			</view>
		</view>
	</view>
</template>

<script>
	import crystalMixin from '@/mixins/crystalMixin.js';
	import { mapState } from 'vuex';
	export default {
		mixins:[ crystalMixin ],
		props:{
			item:{
				type: Object
			}
		},
		computed:{
			info(){
				return { id:this.item.goods_id,...this.item }
			}
		},
		data() {
			return {
				
			};
		},
		methods:{
			toDetails() {
				let { type,collection_id,batch_id,blind_box_id,goods_id,origin } = this.info;
				if(!this.exchangeStatus) return;
				switch(Number(type)){
					case 10:
						uni.$u.route('/pages/shop/detail/collection',{'id':goods_id,batch_id,collection_id,origin})
						break;
					case 20:
						uni.$u.route('/pages/shop/detail/box',{'id':goods_id,blind_box_id,origin})
						break;
					case 30:
						uni.$u.route('/pages/shop/detail/goods',{'id':goods_id,origin})
						break;
				}
			},
			getText() {
				let { stock } = this.info;
				if(this.exchangeStatus==0){
					return '敬请期待'
				}else{
					return '立即兑换'
					// return `剩余 ${stock}`
				}	
			},
			getStatus(){
				if(this.exchangeStatus==1) {
					return { icon:'clock',text:'倒计时',time:this.countDown }
				}else if(this.exchangeStatus==2){
					return { icon:'hot',text:'兑换中' }
				}else if(this.exchangeStatus==4){
					return { icon:'sale-done',text:'已兑完' }
				}else if(this.exchangeStatus==5){
					return { icon:'sale-done',text:'水晶不足' }
				}else{
					return false
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.item_con{
		width: 328rpx;
		border-radius: 24rpx;
		padding-top: 6rpx;
		background-color: #fff;
		>.img_con{
			width: 328rpx;
			height: 328rpx;
			// margin-left: calc(50% - 156rpx);
			// box-shadow: 0 4rpx 20rpx #ccc;
			border-radius: 20rpx;
			position: relative;
			overflow: hidden;
			>.text{
				width: 100%;
				height: 50rpx;
				line-height: 50rpx;
				text-align: center;
				background-color: rgba(000, 000, 000, .3);
				position: absolute;
				left: 0;
				bottom: 0;
				backdrop-filter: blur(10rpx);
				font-weight: 500;
				color: #fff;
				font-size: 24rpx;
			}
			>.hint{
				width: fit-content;
				padding: 0 16rpx;
				height: 40rpx;
				line-height: 40rpx;
				text-align: center;
				background-color: rgba(000, 000, 000, .3);
				position: absolute;
				left: 0;
				top: 0;
				backdrop-filter: blur(10rpx);
				border-bottom-right-radius: 20rpx;
				/deep/ .u-count-down__text{
					font-size: 20rpx;
					color: #fff;
				}
			}
		}
		>.info{
			width: 100%;
			height: 146rpx;
			overflow: hidden;
			border-radius:0 0 24rpx 24rpx;
			@extend .flex,.flex-dir-col,.flex-js-center,.plr-10;
			
			>.t1{
				width: 100%;
				@extend .font-size-14,.mb-10;
			}
			
			.dh-btn {
				width: 102rpx;
				height: 52rpx;				
				background: linear-gradient( 180deg, #FB957C 0%, #FA4818 100%);
				border-radius: 28rpx 28rpx 28rpx 28rpx;
				font-family: Source Han Sans CN VF, Source Han Sans CN VF;
				font-weight: 500;
				font-size: 28rpx;
				color: #FFFFFF;
				text-align: center;
				line-height: 52rpx;

			}
		}
	}
</style>